<template>
  <el-container direction="vertical" style="padding: 10px">
    <div style="display: flex;justify-content: space-between">
      <p class="h2-title">{{text()}}场景</p>
      <div>
        <el-button plain @click="routerBack" :disabled="false">返回</el-button>
        <el-button type="primary" @click="saveScene" :disabled="disabled">保存场景</el-button>
      </div>
    </div>
    <el-form class="custom-form" :model="sceneForm" :disabled="disabled" ref="scene" :rules="rules"
      style="width: 100%;padding-left: 30px;" label-postion="left" size="small" label-width="88px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="场景名称:" prop="sceneName">
            <el-input v-model="sceneForm.sceneName" placeholder="请输入场景名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="场景分类:" prop="sceneClassification">
            <el-select v-model="sceneForm.sceneClassification" clearable filterable placeholder="请选择场景分类">
              <el-option v-for="(item,index) in sceneClassification" :key="index" :label="item.dictLabel"
                :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="场景描述:" prop="sceneRemake">
            <el-input type="textarea" v-model="sceneForm.sceneRemake" maxlength="10000" show-word-limit
              placeholder="请输入场景描述"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="shadow" style="padding: 15px;margin-top: 15px">
      <p class="h2-title">{{text()}}场景节点</p>
      <div class="left con configNode">
        <div class="node-item scroll-item" style="position: relative;" :class="{'active' : nodeIndex === index}"
          v-for="(item,index) in nodeConfigList" :key="index" @click="editNode(index,item)">
          <p class="name">流程{{ index + 1}}</p>
          <p class="flow" :class="{'ellipsis' : item.nodeName.length > 6}" :title="item.nodeName.length > 6 ? item.nodeName : ''">{{item.nodeName}}</p>
          <div class="lines flex">
            <div class="line-item" :style="{backgroundColor:index === 0 ? 'transparent' : '#000'}"></div>
            <div class="center-round"></div>
            <!-- :style="{backgroundColor:index ===  nodeConfigList.length - 1 && index !== 0 ? 'transparent' : '#000'}" -->
            <div class="line-item"></div>
          </div>
          <div class="nodeCapacity" :title="item.nodeCapacity">
            {{item.nodeCapacity}}
          </div>
          <el-button @click.stop="delNode(item)" :disabled="disabled" type="danger" size="small"
            style="position: absolute;right: 2px;top: 2px;">删除</el-button>
        </div>
        <div class="node-item scroll-item" :class="{'active' : nodeIndex === nodeConfigList.length}">
          <el-button type="primary" icon="el-icon-plus" :disabled="disabled"
            @click="editNode(nodeConfigList.length)">添加</el-button>
        </div>
      </div>
      <div>
        <p class="h2-title">{{params.type === 'detail'? '查看' : '配置'}}节点能力</p>
        <div class="right con" v-if="sceneForm.sceneClassification  == '1' || sceneForm.sceneClassification  == ''">
          <div class="innerContent">
            <p class="currentFlow">流程{{nodeForm.nodeSort}}</p>
            <div>
              <p class="addmargin smallFz">
                步骤1-节点选择（业务数据库）:
              </p>
              <el-form size="small" class="custom-form" :disabled="disabled" label-position="right"
                label-width="80px">
                <el-form-item label="目标表:">
                  <el-select clearable filterable v-model="nodeForm.nodeTarget">
                    <el-option v-for="(item,index) in targetTable" :key="index" :label="item.dictLabel"
                      :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="目标字段:">
                  <el-select clearable filterable v-model="nodeForm.nodeTargetField">
                    <el-option v-for="(item,index) in targetField" :key="index" :label="item.dictLabel"
                      :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="节点名称:">
                  <el-select v-model="nodeForm.jymnMnSettingList[0].mnSettingType" @change="onNodeNameChange">
                    <el-option v-for="(item,index) in nodeNameList" :key="index" :label="item.dictLabel"
                      :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <p class="addmargin smallFz">
                步骤2-能力值设置:
              </p>
              <!-- 预约进港start -->
              <el-form size="small" :disabled="disabled" class="custom-form" label-position="left"
                v-if="nodeForm.jymnMnSettingList[0].mnSettingType === '1'">
                <el-form-item label="每日可预约:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue2">
                    <template slot="append">小时</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="每小时可预约:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue1">
                    <template slot="append">辆车</template>
                  </el-input>
                </el-form-item>
              </el-form>
              <!-- 预约进港end -->
              <!-- 进港start -->
              <el-form size="small" :disabled="disabled" class="custom-form" label-position="left"
                v-if="nodeForm.jymnMnSettingList[0].mnSettingType === '2'">
                <el-form-item label="集装箱进港口卡口通道为:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue1">
                    <template slot="append">个</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="集装箱车辆进闸速率为:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue2">
                    <template slot="append">分钟/箱</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="散货车进港口卡口通道为:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue3">
                    <template slot="append">个</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="散货车进闸速率为:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue4">
                    <template slot="append">分钟/车</template>
                  </el-input>
                </el-form-item>
              </el-form>
              <!-- 进港end -->
              <!-- 过磅start -->
              <el-form size="small" class="custom-form" label-position="left"
                v-if="nodeForm.jymnMnSettingList[0].mnSettingType === '3'">
                <el-form-item label="集装箱地磅数量为:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue1">
                    <template slot="append">个</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="平均一天可通行集装箱车辆约:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue2">
                    <template slot="append">车</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="干散货地磅数量为:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue3">
                    <template slot="append">个</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="平均一天可通行散货车辆约:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue4">
                    <template slot="append">车</template>
                  </el-input>
                </el-form-item>
              </el-form>
              <!-- 过磅end -->
              <!-- 堆场存放start -->
              <el-form size="small" class="custom-form" label-position="left"
                v-if="nodeForm.jymnMnSettingList[0].mnSettingType === '4'">
                <el-form-item label="作业线共:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue1">
                    <template slot="append">条</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="集装箱收箱速率约:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue2">
                    <template slot="append">分钟/箱</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="堆场最大可存放集装箱数量为:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue3">
                    <template slot="append">标箱</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="仓库面积:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue4">
                    <template slot="append">平方米</template>
                  </el-input>
                </el-form-item>
              </el-form>
              <!-- 堆场存放end -->
              <!-- 移箱start -->
              <el-form size="small" class="custom-form" label-position="left"
                v-if="nodeForm.jymnMnSettingList[0].mnSettingType === '5'">
                <el-form-item label="查验口数量:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue1">
                    <template slot="append">个</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="查验仓库面积为:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue2">
                    <template slot="append">平方米</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="移箱速率:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue3">
                    <template slot="append">分钟/箱</template>
                  </el-input>
                </el-form-item>
              </el-form>
              <!-- 移箱end -->
              <!-- 装船start -->
              <el-form size="small" class="custom-form" label-position="left"
                v-if="nodeForm.jymnMnSettingList[0].mnSettingType === '6'">
                <el-form-item label="集装箱装船泊位:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue1">
                    <template slot="append">个</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="集装箱装船速率约为:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue2">
                    <template slot="append">小时/船</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="每船大概能装:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue3">
                    <template slot="append">集装箱</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="干散货装船泊位:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue4">
                    <template slot="append">个</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="干散货装船每船大概:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue5">
                    <template slot="append">吨</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="干散货装船每船大概需要:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue6">
                    <template slot="append">小时</template>
                  </el-input>
                </el-form-item>
              </el-form>
              <!-- 装船end -->
              <!-- 卸船start -->
              <el-form size="small" class="custom-form" label-position="left"
                v-if="nodeForm.jymnMnSettingList[0].mnSettingType === '7'">
                <el-form-item label="集装箱卸船泊位:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue1">
                    <template slot="append">个</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="集装箱卸船速率约为:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue2">
                    <template slot="append">小时/船</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="每船大概能卸:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue3">
                    <template slot="append">集装箱</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="干散货卸船泊位:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue4">
                    <template slot="append">个</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="干散货卸船每船大概:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue5">
                    <template slot="append">吨</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="干散货卸船每船大概需要:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue6">
                    <template slot="append">小时</template>
                  </el-input>
                </el-form-item>
              </el-form>
              <!-- 卸船end -->
              <!-- 车辆装车start -->
              <el-form size="small" class="custom-form" label-position="left"
                v-if="nodeForm.jymnMnSettingList[0].mnSettingType === '8'">
                <el-form-item label="集装箱提箱速率约:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue1">
                    <template slot="append">分钟/箱左右</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="作业线共:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue2">
                    <template slot="append">条</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="干散货装货出去速率约:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue3">
                    <template slot="append">分钟/车左右</template>
                  </el-input>
                </el-form-item>
              </el-form>
              <!-- 车辆装车end -->
              <!-- 出卡口start -->
              <el-form size="small" class="custom-form" label-position="left"
                v-if="nodeForm.jymnMnSettingList[0].mnSettingType === '9'">
                <el-form-item label="出港口卡口通道为:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue1">
                    <template slot="append">个（集装箱干散货共用）</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="车辆出闸速率为:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue2">
                    <template slot="append">秒/车</template>
                  </el-input>
                </el-form-item>
              </el-form>
              <!-- 出卡口end -->
              <!-- 回堆场存放start -->
              <el-form size="small" class="custom-form" label-position="left"
                v-if="nodeForm.jymnMnSettingList[0].mnSettingType === '10'">
                <el-form-item label="作业线共:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue1">
                    <template slot="append">条</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="集装箱收箱速率约:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue2">
                    <template slot="append">分钟/箱左右</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="堆场最大可存放集装箱数量为:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue3">
                    <template slot="append">标箱</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="仓库面积:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue4">
                    <template slot="append">平方米</template>
                  </el-input>
                </el-form-item>
              </el-form>
              <!-- 回堆场存放end -->
              <p class="addmargin smallFz">
                节点顺序调整:
              </p>
              <div class="flow-path">
                <span class="smallFz">流程{{nodeForm.nodeSort}}</span>
                <el-button type="primary" plain size="small" @click="changeNode('prev')"
                  :disabled="disabled">前移</el-button>
                <el-button type="primary" plain size="small" @click="changeNode('next')"
                  :disabled="disabled">后移</el-button>
              </div>
            </div>
            <div style="display: flex;justify-content: flex-end;">
              <el-button size="small" type="primary" @click="saveNode" :disabled="disabled">节点保存</el-button>
            </div>
          </div>
        </div>
        <div v-else-if="sceneForm.sceneClassification == '2'" class="right con">
          <div class="innerContent">
            <p class="currentFlow">流程{{nodeForm.nodeSort}}</p>
            <div>
              <p class="addmargin smallFz">步骤一,设置节点名称:</p>
              <!-- :model="nodeForm" :rules="rules" ref="testRef" -->
              <el-form  label-position="right" size="small" class="custom-form"  :disabled="disabled" label-width="80px">
                <el-form-item label="节点名称:" prop="nodeName">
                  <el-input clearable v-model="nodeForm.nodeName"></el-input>
                </el-form-item>
                <el-form-item label="风险属性:">
                  <el-select filterable clearable v-model="nodeForm.nodeRiskType">
                    <el-option :value="item.dictValue" :label="item.dictLabel" v-for="(item,index) in nodeRiskType" :key="item.dictCode"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <p class="addmargin smallFz">步骤二,风险参数设置</p>
              <el-form label-position="right" size="small" class="custom-form" :disabled="disabled"
                label-width="110px">
                <el-form-item label="违规概率:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue1">
                    <template slot="append">%</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="违规税额损失:">
                  <el-input type="number" min="1" v-model="nodeForm.jymnMnSettingList[0].mnSettingValue2">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-form>
              <p class="addmargin">
                节点顺序调整:
              </p>
              <div class="flow-path">
                <span>流程{{nodeForm.nodeSort}}</span>
                <el-button type="primary" plain size="small" @click="changeNode('prev')"
                  :disabled="disabled">前移</el-button>
                <el-button type="primary" plain size="small" @click="changeNode('next')"
                  :disabled="disabled">后移</el-button>
              </div>
            </div>
            <div style="display: flex;justify-content: flex-end;">
              <el-button size="small" type="primary" @click="saveNode" :disabled="disabled">节点保存</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
  import {
    openMessage
  } from '@/utils'
import { param } from '../../utils';
let isState = '' //前移后移之前,点的是添加的 还是节点本身的
  export default {
    name: "addScene",
    data() {
      return {
        type: '', //类型（新建 编辑 详情）
        params: {},
        isShowNodeList: false,
        disabled: false, //不禁止
        sceneClassification: [], //场景分类
        targetTable: [], //目标表
        targetField: [], //目标字段
        nodeRiskType: [], //风险属性
        nodeIndex: 0, //高亮
        isShow: false,
        sceneForm: {
          sceneName: '', //场景名称
          sceneClassification: '', //场景分类
          sceneRemake: '', //场景描述
        },
        nodeConfigList: [], //节点
        nodeNameList: [], //节点名称列表
        nodeForm: { //节点操作时的表单对象
          nodeTarget: '', //目标表
          nodeTargetField: '', //目标字段
          nodeName: '', //节点名称
          nodeSort: 1, //节点排序字段
          parentId: '', //
          sortOld: '',
          nodeRiskType:'',//风险属性
          jymnMnSettingList: [{
            mnSettingType: '', //节点名称对应的ID
            mnSettingValue1: '', //节点名称下输入的一些字段
            mnSettingValue2: '',
            mnSettingValue3: '',
            mnSettingValue4: '',
            mnSettingValue5: '',
            mnSettingValue6: '',
          }],
        },
        rules: {
          sceneName: [{
            required: true,
            message: "请输入场景名称",
            trigger: 'blur'
          }, ],
          sceneClassification: [{
            required: true,
            message: "请选择场景分类",
            trigger: 'change'
          }, ],
          sceneRemake: [{
            required: true,
            message: "请输入场景描述",
            trigger: 'blur'
          }]
        },
      };
    },
    computed: {

    },
    beforeDestroy() {
      if (sessionStorage.getItem('parentId')) sessionStorage.removeItem('parentId')
      delete this.nodeForm.id
    },
    methods: {
      text() {
        let value = ''
        switch (this.params.type) {
          case 'add':
            value = '新增'
            break;
          case 'edit':
            value = '编辑'
            break;
          case 'detail':
            value = '查看'
            break;
        }
        return value
      },
      queryNodeRiskTypeList() {
        this.$request({
          url: '/system/dict/data/type/node_risk_type',
          methed: 'get'
        }).then(({
          code,
          data
        }) => {
          code === 200 && (this.nodeRiskType = data)
        })
      },
      // 保存一个场景
      saveScene() {
        this.$refs.scene.validate(valid => {
          if (valid) { //验证通过
            this.$request({
              url: '/hnzc/ylcs/jymn/hnzcSceneInfo/insert',
              method: 'post',
              data: this.sceneForm
            }).then(({
              code,
              data
            }) => {
              if (code === 200) {
                openMessage(`${this.params.type === 'add' ? '新增成功':'编辑成功'}`, 'success')
                if (this.params.type === 'add') {
                  sessionStorage.setItem('parentId', data.id) //防止有刁民刷新时将id弄消失
                }
                // this.$refs.scene.resetFields()
              }
            })
          }
        })
      },
      // 选择不同的节点名称时
      onNodeNameChange(e) {
        this.nodeForm.jymnMnSettingList.forEach(item => {
          for (let key in item) {
            if (key !== 'mnSettingType') {
              this.$set(item, key, '')
            }
          }
        })
        this.nodeNameList.forEach(item => {
          if (e === item.dictValue) {
            this.nodeForm.nodeName = item.dictLabel
          }
        })
      },
      // 保存节点
      saveNode() {
        if (this.sceneForm.sceneClassification == '2') {
          this.nodeForm.jymnMnSettingList[0].mnSettingType = '00'
        }
        if (this.params.type === 'add') {
          this.nodeForm.parentId = sessionStorage.getItem('parentId')
          if (!this.nodeForm.parentId) {
            this.$message({
              message: '请先保存场景',
              type: 'warning'
            })
            return
          }
        } else {
          this.nodeForm.parentId = this.params.id
        }
        if (this.nodeForm.nodeSort === this.nodeForm.sortOld) {
          delete this.nodeForm.sortOld
        }
        // return
        this.$request({
          url: '/hnzc/ylcs/jymn/hnzcNodeInfo/saveNode',
          method: 'post',
          data: this.nodeForm
        }).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.showDetail()
            this.nodeForm = { //节点操作时的表单对象
              nodeTarget: '', //目标表
              nodeTargetField: '', //目标字段
              nodeName: '', //节点名称
              nodeSort: 1, //节点排序字段
              parentId: '', //
              sortOld: '',
              nodeRiskType:'',
              jymnMnSettingList: [{
                mnSettingType: '', //节点名称对应的ID
                mnSettingValue1: '', //节点名称下输入的一些字段
                mnSettingValue2: '',
                mnSettingValue3: '',
                mnSettingValue4: '',
                mnSettingValue5: '',
                mnSettingValue6: '',
              }],
            }
          } else {
            this.$message({
              message: '操作失败',
              type: 'error'
            })
          }
        })
      },
      editNode(index, item) {
        if (this.isShowNodeList == false) this.isShowNodeList = true
        this.nodeIndex = index
        this.nodeForm.nodeSort = index + 1
        this.nodeForm.sortOld = index + 1
        this.isState = item ? 'add' : 'nodeSelf'
        if (item) {
          item.jymnMnSettingList.forEach((val, index) => {
            if (index === 0) {
              let currentItem = item.jymnMnSettingList[index]
              this.nodeForm.jymnMnSettingList[index].mnSettingType = currentItem.mnSettingType
              this.nodeForm.jymnMnSettingList[index].mnSettingValue1 = currentItem.mnSettingValue1
              this.nodeForm.jymnMnSettingList[index].mnSettingValue2 = currentItem.mnSettingValue2
              this.nodeForm.jymnMnSettingList[index].mnSettingValue3 = currentItem.mnSettingValue3
              this.nodeForm.jymnMnSettingList[index].mnSettingValue4 = currentItem.mnSettingValue4
              this.nodeForm.jymnMnSettingList[index].mnSettingValue5 = currentItem.mnSettingValue5
              this.nodeForm.jymnMnSettingList[index].mnSettingValue6 = currentItem.mnSettingValue6
            }
          })
          this.nodeForm.nodeRiskType = item.nodeRiskType
          this.nodeForm.nodeName = item.nodeName
          this.nodeForm.id = item.id
          this.nodeForm.nodeTarget = item.nodeTarget
          this.nodeForm.nodeTargetField = item.nodeTargetField
        } else {
          this.nodeForm.nodeTarget = ''
          this.nodeForm.nodeTargetField = ''
          this.nodeForm.nodeName = ''
          this.nodeForm.nodeRiskType = ''
          delete this.nodeForm.id
          this.nodeForm.jymnMnSettingList.forEach((item) => {
            for (let key in item) {
              item[key] = ''
            }
          })
        }
      },
      // 返回上一页面
      routerBack() {
        this.$router.back()
      },
      // 删除节点
      delNode(item) {
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$request({
            url: '/hnzc/ylcs/jymn/hnzcNodeInfo/deleteNode',
            method: 'get',
            params: {
              id: item.id
            }
          }).then(({
            code
          }) => {
            if (code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.showDetail()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 查询场景分类的
      querySceneClassification() {
        this.$request({
          url: '/system/dict/data/type/ylcs_cjfl',
          methed: 'get'
        }).then(({
          code,
          data
        }) => {
          code === 200 && (this.sceneClassification = data)
        })
      },
      // 查询目标表
      queryTargetTable() {
        this.$request({
          url: '/system/dict/data/type/lscs_mbb',
          methed: 'get'
        }).then(({
          code,
          data
        }) => {
          if (code === 200) {
            this.targetTable = data
          }
        })
      },
      // 节点名称
      queryNodeNameList() {
        this.$request({
          url: '/system/dict/data/type/jymn_setting_type',
          method: 'get',
        }).then(({
          code,
          data
        }) => {
          code === 200 && (this.nodeNameList = data)
        })
      },
      // 查询目标字段
      queryTargetField() {
        this.$request({
          url: '/system/dict/data/type/lscs_mbzd',
          methed: 'get'
        }).then(({
          code,
          data
        }) => {
          if (code === 200) {
            this.targetField = data
          }
        })
      },
      showDetail() {
        this.$request({
          url: `/hnzc/ylcs/jymn/hnzcSceneInfo/selectDetailById`,
          method: 'get',
          params: {
            id:this.params.id || sessionStorage.getItem('parentId')
          }
        }).then(({
          code,
          data
        }) => {
          if (code === 200) {
            this.nodeConfigList = data.nodeInfoList
            this.sceneForm.sceneClassification = data.sceneClassification
            this.sceneForm.sceneName = data.sceneName
            this.sceneForm.sceneRemake = data.sceneRemake
            //回显
            let item = this.nodeConfigList[this.nodeIndex]
            item.jymnMnSettingList.forEach((val,index) => {
              if (index === 0) {
                let currentItem = item.jymnMnSettingList[index]
                 this.nodeForm.jymnMnSettingList[index].mnSettingType = currentItem.mnSettingType
                 this.nodeForm.jymnMnSettingList[index].mnSettingValue1 = currentItem.mnSettingValue1
                 this.nodeForm.jymnMnSettingList[index].mnSettingValue2 = currentItem.mnSettingValue2
                 this.nodeForm.jymnMnSettingList[index].mnSettingValue3 = currentItem.mnSettingValue3
                 this.nodeForm.jymnMnSettingList[index].mnSettingValue4 = currentItem.mnSettingValue4
                 this.nodeForm.jymnMnSettingList[index].mnSettingValue5 = currentItem.mnSettingValue5
                 this.nodeForm.jymnMnSettingList[index].mnSettingValue6 = currentItem.mnSettingValue6
              }
            })
            this.nodeForm.nodeName = item.nodeName
            this.nodeForm.id = item.id
            this.nodeForm.nodeSort = this.nodeIndex + 1
            this.nodeForm.sortOld = this.nodeIndex + 1
            this.nodeForm.nodeTarget = item.nodeTarget
            this.nodeForm.nodeTargetField = item.nodeTargetField
          }
        })
      },
      // 前移或者后移节点
      changeNode(type) {
        let len = this.isState === 'add' ? this.nodeConfigList.length : this.nodeConfigList.length + 1
        switch (type) {
          case 'prev': //往前移动配置节点，最小要保证是1
            if (this.nodeForm.nodeSort <= 1) {
              this.$message({
                message: '当前已经为最小节点,不可再往前移动',
                type: 'warning'
              })
              return
            }
            this.nodeForm.nodeSort--
            break;
          case 'next':
            if (this.nodeForm.nodeSort >= len) {
              this.$message({
                message: '当前已经为最大节点,不可再往后移动',
                type: 'warning'
              })
              return
            }
            this.nodeForm.nodeSort++
            break;
        }
      }
    },
    created() {
      this.queryNodeRiskTypeList()
    },
    mounted() {
      this.params = this.$route.query
      if (this.params.type === 'detail') this.disabled = true
      this.isShowNodeList = this.params.type == 'add' ? false : true
      if (this.params.id) {
        this.sceneForm.id = this.params.id
        this.showDetail()
      } else {
        delete this.sceneForm.id
        this.nodeConfigList = []
      }
      this.querySceneClassification()
      this.queryTargetTable()
      this.queryTargetField()
      this.queryNodeNameList()
    },
  };
</script>

<style scoped lang="scss">
  @import '@/assets/styles/nodeStyle.scss';
  .flex {
    display: flex;
  }
  .smallFz{
    font-size: 14px;
    font-weight: 700;
    color: #606266;
  }
  p{
    margin: 0;
    padding: 0;
  }
  .h2-title {
    padding-left: 15px;
    border-left: 2px solid rgb(59, 69, 93);
    font-weight: 700;
    margin: 10px 0;
  }

  .custom-form {
    ::v-deep .el-select {
      width: 100%;
    }
  }

  .txt-center {
    text-align: center;
  }

  .configNode {
    height: 100%;
    width: auto;
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    overflow-x: auto;
    &::-webkit-scrollbar {
      height: 12px;
      border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 6px; /* 设置滑块圆角 */
      background-color: rgb(165,169,183);
    }
    &::-webkit-scrollbar-track {
      border-radius: 5px;
      background-color: transparent; /* 设置滚动条滑块颜色 rgb(165,169,183)*/
    }
    .node-item{
      margin-bottom: 12px;
    }
    .scroll-item {
      cursor: pointer;
      &:last-child {
        position: relative;
        .el-button {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .active {
      border: 2px solid #f00;
    }
  }

  .shadow {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
  }

  .con {
    // height: 400px;

    .innerContent {
      // padding: 20px;
      // height: 360px;
      // overflow-y: scroll;

      .currentFlow {
        height: 20px;
        line-height: 10px;
        text-align: center;
      }

      .ml {
        margin-left: 20px;
      }
    }
  }

  .radio-parent {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-bottom: 10px;
  }

  .flow-path {
    span {
      padding: 0 20px;
    }
  }
  p.addmargin{
    margin: 10px 0;
  }
</style>
